<template>
  <div style="height: 100%;">
    
    <van-calendar
      :show-confirm="false"
      v-model="showDate"
      @confirm="onConfirm"
    />
    <van-popup
      v-model="show"
      position="left"
      class="fa"
      :style="{ height: '100%', width: '100%', overflow: 'auto' }"
    >
      <div>
        <!-- 引入公共头部组件 -->
        <HeaderMenu title="客户信息详情" leftText="返回" />
        <div style="height: 100%;">
          <van-form @submit="onSubmit">
            <div class="client">
              <van-field label="客户编码：" v-model="entity.cCusCode" readonly>
                <!-- @click="CustomerChoice" -->
                <!-- right-icon="edit"        -->
              </van-field>
              <van-field label="客户名称：" v-model="entity.cCusName" readonly>
              </van-field>
              <van-field label="省:" v-model="entity.cProvinceName" readonly>
              </van-field>
              <van-popup v-model="showcProvince" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columnscProvince"
                  @confirm="cProvinceConfirm"
                  @cancel="showcProvince = false"
                  value-key="name"
                />
              </van-popup>
              <van-field label="市:" v-model="entity.cCityName" readonly>
              </van-field>
              <van-popup v-model="showcCity" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columnscCity"
                  @confirm="cCityConfirm"
                  @cancel="showcCity = false"
                  value-key="name"
                />
              </van-popup>
              <van-field label="区:" v-model="entity.cCountyName" readonly>
              </van-field>
              <van-popup v-model="showcCounty" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columnscCounty"
                  @confirm="cCountyConfirm"
                  @cancel="showcCounty = false"
                  value-key="name"
                />
              </van-popup>

              <van-field label="行业分类：" v-model="entity.cTrade" readonly>
              </van-field>
              <van-field
                readonly
                clickable
                name="picker"
                v-model="entity.SaleType"
                label="销售性质"
                placeholder="销售性质"
              />
              <!-- @click="showPicker = true" -->
              <van-popup v-model="showPicker" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columns"
                  @confirm="onConfirm"
                  @cancel="showPicker = false"
                />
              </van-popup>
              <!-- @click="CustomerChoice" -->
              <!-- right-icon="edit" -->
              <van-field
                label="上级单位: "
                placeholder="上级单位"
                v-model="entity.ParentName"
                readonly
              >
                <!-- <Myuser @customerChoice="Client" ref="myuser" /> -->
              </van-field>

              <van-field
                readonly
                clickable
                name="picker"
                v-model="entity.cCusTypeName"
                label="客户类型"
                placeholder="点击选择客户类型"
              />
              <!-- @click="showType = true" -->
              <van-popup v-model="showType" position="bottom">
                <van-picker
                  show-toolbar
                  :columns="columnsType"
                  @confirm="onTypeConfirm"
                  @cancel="showType = false"
                  value-key="name"
                />
              </van-popup>
              <!-- <van-field
              label="客户来源："
              v-model="entity.CustomerOrigin"
              readonly
            ></van-field> -->
              <van-field
                label="营业执照："
                v-model="entity.cCusPhone"
                readonly
              ></van-field>
              <van-field
                label="开票要求："
                v-model="entity.IRInfo"
                readonly
              ></van-field>
              <van-field
                label="地址："
                v-model="entity.cCusAddress"
                readonly
              ></van-field>
            </div>
          </van-form>
          <!-- <van-collapse v-model="activeNames">
            <van-collapse-item title="联系人" name="1">
              <van-cell-group v-for="item in UserList" :key="item.Id">
                <van-cell :title="item.Name" :value="item.RoleName">
                  <template #title>
                    <span class="Celltitle">{{ item.Name }}</span>
                    <span class="custom-title">{{ item.Tel_Code }}</span>
                  </template>
                </van-cell>
              </van-cell-group>
            </van-collapse-item> -->
            <!-- <van-collapse-item title="地址簿" name="2">
              <van-cell-group v-for="item in UserAddress" :key="item.Id">
                <van-cell
                  :title="item.Addressee"
                  :label="item.Address"
                  :value="item.TelNumber"
                >
                  <template #title>
                    <span class="Celltitle">{{ item.Addressee }}</span>
                  </template>
                </van-cell>
              </van-cell-group>
            </van-collapse-item> -->
          <!-- </van-collapse> -->
          <div style="height: 10vh;"></div>
        </div>
      </div>
      <!-- <Myuser @customerChoice="Client" ref="myuser" /> -->

      <!-- <order ref="order" /> -->
    </van-popup>
  </div>
</template>

<script>
import { Icon } from "vant";
import { Popup } from "vant";
import { AddressList } from "vant";

import {
  Row,
  Col,
  Cell,
  CellGroup,
  Stepper,
  Toast,
  Calendar,
  NavBar
} from "vant";
import { Field } from "vant";
//客户

// import Myuser from "../../components/OwnUser.vue";
// import order from "./order.vue";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";
export default {
  components: {
    // order,
    "van-stepper": Stepper,
    "van-calendar": Calendar,
    "van-nav-bar": NavBar,
    "van-icon": Icon,
    "van-popup": Popup,
    "van-row": Row,
    "van-address-list": AddressList,
    "van-field": Field,
    "van-col": Col,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    HeaderMenu
    // Myuser
  },
  data() {
    return {
      showcProvince: false,
      showType: false,
      showcCounty: false,
      listChildren: [],
      showcCity: false,
      columnscProvince: [], //省
      columnscCity: [], //市
      columnscCounty: [], //区
      columnsType: [
        {
          name: "潜在",
          Id: 0
        },
        {
          name: "正式",
          Id: 1
        },
        {
          name: "休眠",
          Id: 2
        },
        {
          name: "待转正",
          Id: 3
        }
      ],
      flag: 0,
      dataOUT: [],
      activeNames: ["1"],
      value: "",
      showArea: false,
      areaList: {},
      columns: [],
      showPicker: false,
      entity: {},
      data: [],
      cCusCode: "",
      show: false,
      showDate: false,
      listcounty:[],
      Id: "",
      UserList: [], //联系人
      UserAddress: [] //地址
    };
  },
  created() {
    this.openForm(this.$route.query.Id, this.$route.query.cCusCode);
  },
  methods: {
    swipeleft() {
      this.show = false;
    },
    touchstart(e) {
      // alert("123");

      // e.preventDefault();

      this.startX = e.touches[0].clientX;
      this.startY = e.touches[0].clientY;
    },
    touchmove(e) {
      //  this.show = false;
      e.preventDefault();

      this.moveX = e.touches[0].clientX;
      this.moveY = e.touches[0].clientY;
      // this.startX - this.moveX <= 0
      //   ? console.log("你在往右滑")
      //   : console.log("你在往左滑");
    },

    //获取省份信息
    getlist() {
      this.http
        .post("/Base_BasicData/Base_District/GetDataListByPId?pId=0", {})
        .then(resJson => {
          this.ListProvince = resJson.Data;
          this.columnscProvince = resJson.Data.map(item => {
            return item.Name;
          });
          if (!this.flag) {
            console.log(123);
            this.getDataList();
          }
        });
    },
    //市级change
    city() {
      this.http
        .post(
          "/Base_BasicData/Base_District/GetDataListByPId?pId=" +
            this.entity.cProvince,
          {}
        )
        .then(resJson => {
          this.listChildren = resJson.Data;
          this.columnscCity = resJson.Data.map(item => {
            return item.Name;
          });
          //市
          if (this.entity.cCity) {
            let arr2 = [this.entity.cCity].reduce((pre, cur) => {
              let idx = this.listChildren.findIndex(im => im.Id == cur);
              console.log(idx);
              pre.push(this.listChildren[idx]);
              return pre;
            }, []);
            if (arr2[0] != undefined) {
              this.entity.cCityName = arr2[0].Name;
              this.entity.cCity = arr2[0].Id;
            }
          }
        });
    },

    //区
    village() {
      this.http
        .post(
          "/Base_BasicData/Base_District/GetDataListByPId?pId=" +
            this.entity.cCity,
          {}
        )
        .then(resJson => {
          this.listcounty = resJson.Data;
          this.columnscCounty = resJson.Data.map(item => {
            return item.Name;
          });

          if (this.entity.cCity) {
            let arr3 = [this.entity.cCounty].reduce((pre, cur) => {
              let idx = this.listcounty.findIndex(im => im.Id == cur);

              pre.push(this.listcounty[idx]);
              return pre;
            }, []);
            if (arr3[0] != undefined) {
              this.entity.cCountyName = arr3[0].Name;
              this.entity.cCounty = arr3[0].Id;
            }
          }
        });
    },
    onClickright() {
      this.$router.push({
        path: "/formal/Viewdetails/order",
        query: {
          cCusCode: this.cCusCode
        }
      });
      // this.http
      //   .post(
      //     "/CustomerManagement/CustomerInfo/GetIsMyCustomerByOperator?CustomerId=" +
      //       this.entity.Id
      //   )
      //   .then(res => {
      //     if (res.Success) {
      //       if (res.Data) {
      //         console.log(this.cCusCode);
      //         this.$router.push({
      //           path: "/formal/Viewdetails/order",
      //           query: {
      //             cCusCode: this.cCusCode
      //           }
      //         });
      //         // this.$refs.order.openForm(this.cCusCode);
      //         // console.log(res.Data);
      //       } else {
      //         console.log(res.Data);
      //         Toast("抱歉,您不是当前客户的负责人!");
      //       }
      //     }
      //   });

      // console.log(this.entity);
    },
    //区
    cCountyConfirm() {
      this.entity.cCountyName = value;

      let arr = [this.entity.cCountyName].reduce((pre, cur) => {
        let idx = this.listcounty.findIndex(im => im.Name == cur);
        console.log(idx);
        pre.push(this.listcounty[idx]);
        return pre;
      }, []);
      console.log(arr);
      if (arr[0] != undefined) {
        this.entity.cCountyName = arr[0].Name;
        this.entity.cCounty = arr[0].Id;
      }

      this.showcCounty = false;
    },
    //市
    cCityConfirm(value) {
      this.entity.cCityName = value;

      let arr = [this.entity.cCityName].reduce((pre, cur) => {
        let idx = this.listChildren.findIndex(im => im.Name == cur);
        console.log(idx);
        pre.push(this.listChildren[idx]);
        return pre;
      }, []);
      console.log(arr);
      if (arr[0] != undefined) {
        this.entity.cCityName = arr[0].Name;
        this.entity.cCity = arr[0].Id;
      }

      this.showcCity = false;
    },
    //省
    cProvinceConfirm(value) {
      console.log(value);
      this.entity.cProvinceName = value;

      let arr = [this.entity.cProvinceName].reduce((pre, cur) => {
        let idx = this.ListProvince.findIndex(im => im.Name == cur);
        console.log(idx);
        pre.push(this.ListProvince[idx]);
        return pre;
      }, []);
      console.log(arr);
      if (arr) {
        this.entity.cProvinceName = arr[0].Name;
        this.entity.cProvince = arr[0].Id;
      }

      this.showcProvince = false;
    },
    //客户类型
    onTypeConfirm(value) {
      console.log(value);
      this.entity.cCusTypeName = value.name;
      this.entity.cCusType = value.Id;
      this.showType = false;
    },
    onSubmit(values) {
      console.log("submit", values);
    },
    onConfirm(value) {
      this.entity.SaleType = value;
      this.showPicker = false;
    },

    getSelsct() {
      this.http
        .post("/Base_BasicData/Base_DictionaryMain/GetTheDataByDicKey", {
          Condition: "DicKey",
          Keyword: "SaleType"
        })
        .then(res => {
          this.columns = res.Data.DictionaryDetailsList;
          console.log(this.columns);

          if (this.columns && this.columns.length > 0) {
            this.columns = this.columns.map(item => {
              return item.DicName;
            });
          }
          console.log(this.columns);
        });
    },
    formatDate(date) {
      var time = new Date(date);
      var y = time.getFullYear();

      return `${y}-${date.getMonth() + 1}-${date.getDate()}`;
    },

    //返回
    onClickLeft() {
      this.$router.back()
      this.show = false;
    },

    //关闭
    close() {
      this.show = false;
    },
    //本条客户的数据
    Client(a) {
      console.log(a);
      this.$set(this.entity, "ParentId", a.Id);

      this.$set(this.entity, "ParentName", a.cCusName);
    },
    //选择客户
    CustomerChoice() {
      this.$refs.myuser.openForm();
    },
    getOUTList(id) {
      this.http
        //  /CustomerManagement/Customer/GetDataListByMoreCondition
        .post("/CustomerManagement/CustomerInfo/GetTheData", { id: id })
        .then(resJson => {
          this.entity.ParentName = resJson.Data.cCusName;
        });
    },
    getDataList() {
      this.http
        .post("/CustomerManagement/CustomerInfo/GetTheData", {
          id: this.Id
        })
        .then(res => {
          console.log(res);
          if (res.Success) {
            this.flag++;
            this.entity = res.Data;
            if (this.entity.ParentId) this.getOUTList(this.entity.ParentId);
            this.city();
            this.village();
            let arr = [this.entity.cCusType].reduce((pre, cur) => {
              let idx = this.columnsType.findIndex(im => im.Id == cur);
              pre.push(this.columnsType[idx]);
              return pre;
            }, []);
            console.log(arr);
            this.entity.cCusTypeName = arr[0].name;
            this.entity.cCusType = arr[0].Id;
            //省
            if (this.entity.cProvince) {
              let arr1 = [this.entity.cProvince].reduce((pre, cur) => {
                let idx = this.ListProvince.findIndex(im => im.Id == cur);
                console.log(idx);
                pre.push(this.ListProvince[idx]);
                return pre;
              }, []);
              console.log(arr);
              this.entity.cProvinceName = arr1[0].Name;
              this.entity.cProvince = arr1[0].Id;
            }

            this.$set(
              this.entity,
              "CreateTime",
              this.entity.CreateTime.substring(0, 10)
            );
          } else {
            Toast(res.Msg);
          }
        });
    },
    init() {
      this.Id = "";
      this.flag = 0;
      this.show = true;
      this.getSelsct();
      this.data = [];
      this.entity = {};
    },
    handleSubmit() {
      var entityData = { ...this.entity };
      var SSAD_List = [...this.data];
      entityData.SSAD_List = SSAD_List;

      this.http
        .post("/SampleManagement/SPL_SampleApplyMain/SaveData", entityData)
        .then(resJson => {
          console.log(resJson);

          if (resJson.Success) {
            Toast(resJson.Msg);
            this.show = false;

            console.log(this.$parent);
            this.$parent.getDataList();
          } else {
            Toast(resJson.Msg);
          }
        });
    },
    openForm(Id, cCusCode) {
      this.init();

      this.cCusCode = cCusCode;
      console.log(cCusCode);
      if (Id) {
        this.Id = Id;
        this.getlist();

        this.http
          .post(
            "/CustomerManagement/Cust_CustomerLinkMan/GetDataListByConditions",
            {
              Search: [
                {
                  Condition: "CustomerId",
                  Keyword: Id
                }
              ],
              ...this.filters
            }
          )
          .then(resJson => {
            this.UserList = resJson.Data;
            console.log(this.UserList);
          });
      }
      //地址
      this.http
        .post(
          "/CustomerManagement/Cust_AddressBook/GetDataListByMoreCondition",
          {
            Search: [
              {
                Condition: "CustomerId",
                Keyword: cCusCode
              }
            ],
            ...this.filters
          }
        )
        .then(resJson => {
          this.UserAddress = resJson.Data;
        });
    }
  }
};
</script>

<style scoped>
.Fa {
  display: flex;
  justify-content: left;
}
.Celltitle {
  color: #000;
  font-weight: 600;
}
.left {
  margin: 10px 0px 10px 15px;
}
.fontstepper {
  margin-left: 15px;
  line-height: 40px;
}
.font {
  margin-left: 15px;
  font-size: 18px;
}
.aa {
  text-align: right;
}
.scrollBar {
  /* height: 550px; */
  height: calc(100vh - 352px);
  overflow: auto;
  /* padding-bottom: 80px; */
}
.close {
  position: "absolute";

  right: 0;
  bottom: 0;
  padding: "5px 16px";
  background: "#fff";
  text-align: right;
  z-index: 1;
}
.client {
  box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 5px 5px;
}
.mysamplebox {
  width: 95%;

  margin: 0 auto;

  border: 1px solid #ccc;
  /* box-shadow: rgba(128, 128, 128, 0.1) 10px 10px 10px 10px; */

  margin-top: 20px;
  margin-bottom: 10px;
}
</style>
